<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 500px;
        height: 400px;
        border: 1px solid #000;
        margin: 50px auto;
        perspective: 1000px;
        perspective-origin: 50px 100px;
        transform-style: preserve-3d;
        background-color: blueviolet;
        transform: rotateY(87deg);
      }
      section {
        width: 100px;
        height: 200px;
        background-color: yellowgreen;
        transition: 1s;
      }
      div:hover section {
        transform: translateZ(100px);
      }
    </style>
  </head>
  <body>
    <div>
      <section></section>
    </div>
  </body>
</html>

<!-- 
  制造一个近大远小的场景
  景深
  perspective: 800px;

  perspective-origin: 表示景深原点，表示眼睛对过去的那个点

  transform-style: preserve-3d; 真正变成一个3d的场景



  平移
    transform: translate(x, y) 
              translateX(x)
              translateY(y)
              translateZ(y) 
              translate3D(x, y, z)

  旋转
    transfrom: rotate(z)
              rotateX(x)
              rotateY(y)
              
  缩放
    transfrom: scale(x);
              scaleX(x);
              scaleY(y);
              scaleZ(z);
              scale3D(x,y,z);
  

 -->
